<template>
  <div>
    <div class="top">
      <el-input class="deptname" v-model="data.param.deptname" placeholder="请输入部门名称"></el-input>
      <el-button type="primary" @click="initData" icon="el-icon-search" v-show="this.hasPermission('dept:query')">查询</el-button>
      <el-button type="primary" @click="show('新增部门信息',null,false)" icon="el-icon-plus" v-show="this.hasPermission('dept:add')">新增</el-button>
      <el-button type="danger" @click="deletes" icon="el-icon-delete" :disabled="this.multipleSelection.length==0" v-show="this.hasPermission('dept:delete')">批量删除</el-button>
    </div>
    <div style="margin-top: 10px;">
      <template>
        <el-table
            v-loading="loading"
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.8)"
            :data="tableData"
            style="width: 100%"
            border
            @selection-change="handleSelectionChange"
            max-height="450">
          <el-table-column
              type="selection"
              width="55">
          </el-table-column>
          <el-table-column
              prop="deptcode"
              label="部门编号"
          >
          </el-table-column>
            <el-table-column
                prop="deptname"
                label="部门名称"
            >
          </el-table-column>
          <el-table-column
              prop="status"
              label="状态"
              width="120">
            <template slot-scope="scope">
              <el-switch
                  v-model="scope.row.status"
                  :active-value="1"
                  :inactive-value="0"
                  active-color="#02538C"
                  inactive-color="#B9B9B9"
                  @change="changeSwitch(scope.row)"/>
            </template>

          </el-table-column>

          <el-table-column
              fixed="right"
              label="操作"
              width="250">
            <template slot-scope="scope">
              <el-button class="el-icon-search" @click="show('查看部门信息',scope.row,true)" type="primary" size="small">查看</el-button>
              <el-button class="el-icon-edit" @click="show('编辑部门信息',scope.row,false)" type="primary"  size="small">编辑</el-button>
              <el-button class="el-icon-delete" @click="deleteById(row)"  type="warning" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <div style="text-align: right">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="data.pageNumber"
            :page-sizes="[20,100,200,300]"
            :page-size="data.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400">
        </el-pagination>
      </div>
    </div>
    <div id="roleInfo">
      <el-dialog :title="title" :visible.sync="dialogFormVisible">

        <el-form :model="form" ref="form1" :rules="rules" v-loading="loading" :readOnly="readOnly">
          <el-form-item prop="roleCode"  label="部门编号" label-width="120px">
            <el-input size="small" v-model="form.deptcode" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item prop="roleName" size="small" label="部门名称" label-width="120px">
            <el-input v-model="form.deptname" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="上级部门" label-width="120px">
            <el-select size="small" value-key="id"  v-model="form.pid" placeholder="请选择上级部门">
              <el-option :value="0" label="一级部门"></el-option>
              <el-option :label="dept.deptname" :value="dept.id"
                         v-for="(dept) in this.depts" :key="dept.id"></el-option>

            </el-select>
          </el-form-item>
          <el-form-item label="" label-width="120px">
            <el-switch
                v-model="form.status"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-value="1"
                active-text="启用"
                inactive-value="0"
                inactive-text="停用">

            </el-switch>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="close">取 消</el-button>
          <el-button type="primary" @click="save">保 存</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
name: "Dept",
  data(){
    return {
      rules: {
      roleCode: [{required: true, message: '部门编号不能唯恐', trigger: 'blur'}],
      roleName: [{required: true, message: '部门名称不能唯恐', trigger: 'blur'}],
    },
      data:{
        param:{
          deptname:''
        },
        pageNumber:1,
        pageSize:20,
        total:0
      },
      form:{
        deptname:'',
        id:0,
        deptcode:'',
        status:'1'
      },
      tableData:[],
      dialogFormVisible:false,
      loading:true,
      title:'',
      readOnly:false,
      depts:[],
      multipleSelection: []
    }
  },
  mounted() {
    this.initData();
  },
  methods: {

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.data.pageSize=parseInt(val);
      this.initData();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.data.pageNumber = parseInt(val);
      this.initData();
    },
    initData(){

      this.postRequest('/sys/dept/query',this.data).then(resp=>{
        if(resp.success){
          this.tableData = resp.result.list;
          this.data.total=resp.result.total;

        }
        this.loading = false

      })
    },
    show(title,row,readOnly){
      this.title = title
      this.readOnly = readOnly
      this.dialogFormVisible=true
      this.loadDepts();
      if(row!=null){
        this.getRequest('/sys/dept/info/'+row.id).then(resp=>{
          this.form = resp.result;
          this.form.status = resp.result.status+''
          this.loading = false;
        })
      }

    },
    handleSelectionChange(val){

      this.multipleSelection = val

    },
    deleteById(row){
      this.$confirm('此操作将永久删除该部门, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteRequest('/sys/dept/deletes?ids='+row.id).then(resp=>{
          if(resp.success){
            this.initData()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },
    deletes(){
      this.$confirm('此操作将永久删除'+this.multipleSelection.length+'个部门, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let ids='?';
        this.multipleSelection.forEach(item=>{
          ids+='ids='+item.id+'&';
        });
        this.deleteRequest('/sys/dept/deletes'+ids).then(resp=>{
          if(resp.success){
            this.initData()
          }
        });

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },
    close(){
      this.dialogFormVisible = false;
      this.$refs.form1.resetFields()
    },
    changeSwitch(row){
      let data={id:row.id,status:row.status}
      this.postRequest('/sys/dept/save',data).then(resp=>{
        if(resp.success){
          this.initData();


        }
      })
    },
    save(){
      this.$refs.form1.validate(valid=>{
        if(valid){
        this.postRequest('/sys/dept/save',this.form).then(resp=>{
          if(resp.success){
            this.initData();
            this.close();

          }
        })
        }
      })

    },
    loadDepts(){
      this.getRequest('/sys/dept/parentDept').then(resp=>{
         if(resp.success){
           this.depts = resp.result;
         }
      })
    }

  }
}
</script>

<style scoped>
.top{
  display: flex;
}
.deptame{
  width: 200px;
  margin-right: 10px;
}
</style>